<template>
    <div class="home-center-wrapper">
        <ul class="center-content-wrapper"
            v-if="articleList.length"
        >
            <li class="content-item"
                v-for="item in articleList"
                :key="item.id"
                @click="handleContent(item.id)"
            >
                <div class="content-wrapper">
                    <h1 class="title">{{item.articleTitle}}</h1>
                    <p class="content">{{item.articleContent}}</p>
                    <ul class="article-info">
                        <li class="author">{{item.authorName}}</li>
                        <li class="date">{{item.createTime}}</li>

                        <li class="review">
                            <span class="iconfont">&#xe603;</span>
                            {{item.commitCount}}
                        </li>
                        <li class="favour">
                            <span class="iconfont">&#xe674;</span>
                            {{item.likeCount}}
                        </li>
                        <li class="preview">
                            <span class="iconfont">&#xe70c;</span>
                            {{item.readCount}}
                        </li>
                    </ul>
                </div>
                <img v-if="item.image" :src="item.image" class="content-image">
            </li>
        </ul>
        <div class="pagination">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-count="article.pages"
                    :page-sizes="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="article.total"
            >
            </el-pagination>
        </div>
    </div>

</template>

<script>
import { getAllByPage } from "../../../api/home";
import { ERROR_NO } from "../../../util/config";
import { messageMixin } from "../../../common/js/mixin";

export default {
    mixins: [messageMixin],
    props: {
        typeId: {
            type: String,
            default: ''
        }
    },
    data () {
        return {
            articleList: [],
            article: {},
            pageSize: []
        }
    },
    methods: {
        handleSizeChange(val) {
            console.log(val)
        },
        handleCurrentChange(page) {
            this._getAllByPage({page})
        },
        handleContent(id) {
          this.$router.push({path: 'blog', query: {typeId: this.typeId,articleId: id}})
        },
        _getAllByPage ({page = 1, size = 10, typeId = this.typeId} = {}) {
            getAllByPage(page, size, typeId).then(res => {
                if (res.code === ERROR_NO) {
                    const data = res.data.article
                    this.article = data
                    this.pageSize = [data.pageSize]
                    this.navigatepageNums = data.navigatepageNums
                    this.articleList = data.list
                    return
                }
                this._messge({
                    message: res.message
                })
            })
        }
    },
    watch: {
        typeId: function (newId, oldId) {
            if (newId !==oldId || newId !== '') {
                this._getAllByPage()
            }

        }
    }
}
</script>

<style scoped lang="scss">
    @import "src/common/scss/variable";
    .home-center-wrapper {
        position: relative;
        max-width: 935px;
        padding: 29px;
        border-radius: 20px;
        border: 1px solid $border-color;
        overflow: hidden;
        .center-content-wrapper {
           .content-item {
               display: flex;
               justify-content: space-between;
               border-bottom: 1px solid rgb(246, 246, 246);
               cursor: pointer;
               .content-wrapper {
                   display: flex;
                   flex-direction: column;
                   .title {
                       margin-bottom: 13px;
                       line-height: 20px;
                       color: rgb(51, 51, 51);
                       font-size: 15px;
                   }
                   .content {
                       margin-bottom: 14px;
                       font-size: 13px;
                       line-height: 16px;
                       color: rgb(159, 159, 159);
                       overflow: hidden;
                       text-overflow: ellipsis;
                       -webkit-box-orient: vertical;
                       -webkit-line-clamp: 3;
                   }
                   .article-info {
                       display: flex;
                       font-size: 11px;
                       margin-bottom: 17px;
                       line-height: 13px;
                       color: rgb(159, 159, 159);
                       .review, .favour, .preview {
                           .iconfont {
                               margin-right: 2px;
                           }
                       }
                       li + li {
                           margin-left: 24px;
                       }
                   }
               }
               .content-image {
                   margin: 0 21px;
                   flex-shrink: 0;
                   width: 232px;
                   height: 90px;
                   object-fit: cover;
               }
               & + .content-item {
                   margin-top: 14px;
               }
           }
        }
        .pagination {
            display: flex;
            align-items: center;
            height: 106px;
            margin-top: 75px;
            border-top: 1px solid rgb(247, 247, 247);
        }
    }
</style>
